<template>
  <li>
    <groupItem v-for="(item,index) in folderList" :key="index">
      <template>
        <div class="list" @click="handleToggleShow(item.id)">
          <el-button type="text" size="small">
            <i :class="item.children?'el-icon-caret-bottom':'ML'" v-show="item.pid==0"></i>{{item.text}}
          </el-button>
          <div class="rightBtns">
            <el-button type="text" size="mini" @click.stop="addChildren(item.id)" v-show="item.pid==0">创建子文件夹</el-button>
            <div class="iconBtns">
              <span class="icon-bianji icon" @click.stop="editGrouping(item)"></span>
              <span class="icon-delete_icon icon" @click.stop="remove(item.id)"></span>
            </div>
          </div>
        </div>
        <ul :ref="'isOpen'+item.id" style="display:block">
          <DocTree :folderList="item.children"></DocTree>
        </ul>
      </template>
    </groupItem>
  </li>
</template>

<script>

    import groupItem from '@/components/customer/groupItem'
    import {delFolder} from "@/api/mail/admin/mail-doc";

    export default {
        name: "DocTree",
        props:['folderList','frag'],
        components: {
            groupItem
        },
        methods: {
            //添加子目录
            addChildren(id) {
                this.bus.$emit('append',{id: id})
            },
            //编辑
            editGrouping(row) {
                this.bus.$emit('append',Object.assign({}, row, {isMake: true}))
            },
            //删除
            remove(id) {
                this.$confirm('确认删除该文件夹吗?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: "success"
                }).then(() => {
                    delFolder(id).then(res => {
                        this.bus.$emit('refreshFolderChange');
                        this.$message({
                            message: res.data.msg,
                            type: 'success'
                        });
                        this.bus.$emit('getList');
                    }).catch(err => {
                        console.log(err)
                    })
                }).catch(() => {
                });
            },
            handleToggleShow(id) {
                let openItem = this.$refs['isOpen' + id][0];
                if (openItem.style.display == 'block') {
                    openItem.setAttribute('style', 'display:none')
                } else {
                    openItem.setAttribute('style', 'display:block')
                }
            }
        },
        beforeDestroy() {
            this.bus.$off('refreshTree')
        }
    }
</script>

<style scoped lang="scss">
  .list {
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-sizing: border-box;
    border-radius: 7px 7px 0 0;
    position: relative;
    border-bottom: 1px solid #ddd;
  }

  .ML {
    margin-left: 20px;
  }

  .icon {
    font-size: 22px;
    margin: 0 10px
  }

  ul {
    list-style: none;
    margin: 10px 0;
  }

  li {
    padding-left: 27px;
  }

  .rightBtns {
    display: flex;
    align-items: center;
  }
</style>
